<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>熙心健康体检系统 - 首页看板</title>
  <!-- 引入 Layui CSS（CDN 方式，联网即可用） -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入 ECharts（CDN 方式，联网即可用） -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <style>
    /* 侧边栏固定黑色样式 */
    .layui-side {
      width: 200px; 
      background-color: #2f4050; /* 深色侧边栏 */
    }
    .layui-side .layui-nav .layui-nav-item a {
      color: #fff; /* 白色文字 */
    }
    .layui-side .layui-nav .layui-nav-itemed {
      background-color: #1f2d3d; /* 选中项深色背景 */
    }
    /* 主体内容区域样式 */
    .layui-body {
      padding: 20px; 
      background-color: #f3f3f4;
    }
    /* 看板默认隐藏，点击“首页”后显示 */
    #dashboard-container {
      display: none; 
    }
    /* 统计卡片行布局 */
    .stats-row {
      display: flex; 
      gap: 20px; 
      margin-bottom: 20px;
    }
    .stat-card {
      flex: 1; 
      background: #fff; 
      border-radius: 4px; 
      padding: 20px; 
      box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
      text-align: center;
    }
    .stat-card .value {
      font-size: 24px; 
      font-weight: bold; 
      margin-top: 10px; 
      color: #333;
    }
    /* 图表行布局 */
    .charts-row {
      display: flex; 
      gap: 20px; 
      margin-bottom: 20px;
    }
    .chart-card {
      flex: 1; 
      background: #fff; 
      border-radius: 4px; 
      padding: 20px; 
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .chart-title {
      font-size: 14px; 
      font-weight: bold; 
      margin-bottom: 10px; 
      color: #666;
    }
    .chart-container {
      width: 100%; 
      height: 220px; 
    }
    /* 底部面积图卡片 */
    .area-chart-card {
      background: #fff; 
      border-radius: 4px; 
      padding: 20px; 
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    /* 默认提示文本 */
    #tips {
      text-align: center; 
      padding: 50px; 
      color: #999; 
      display: block;
    }
  </style>
</head>
<body class="layui-layout-body">
  <!-- Layui 整体布局容器 -->
  <div class="layui-layout layui-layout-admin">
    
    <!-- 左侧黑色侧边栏 -->
    <div class="layui-side">
      <div class="layui-side-scroll">
        <!-- 系统名称 -->
        <div class="layui-logo" style="color:#fff; padding:20px;">
          熙心健康体检系统
        </div>
        <!-- 导航菜单 -->
        <ul class="layui-nav layui-nav-tree" lay-filter="sideNav">
          <!-- 首页：点击后显示看板 -->
          <li class="layui-nav-item" id="homeNav">
            <a href="javascript:;">首页</a>
          </li>
          <li class="layui-nav-item" id="reserveNav">
            <a href="javascript:;">体检预约</a>
          </li>
          <li class="layui-nav-item" id="listNav">
            <a href="javascript:;">预约列表</a>
          </li>
          <li class="layui-nav-item" id="reportNav">
            <a href="javascript:;">体检报告管理</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 右侧主体内容区域 -->
    <div class="layui-body">
      <!-- 看板容器（默认隐藏） -->
      <div id="dashboard-container">
        <!-- 顶部统计卡片 -->
        <div class="stats-row">
          <div class="stat-card">
            <div><i class="layui-icon layui-icon-user" style="color:#1E9FFF;"></i></div>
            <div class="value">103</div>
          </div>
          <div class="stat-card">
            <div><i class="layui-icon layui-icon-email" style="color:#009688;"></i></div>
            <div class="value">203</div>
          </div>
          <div class="stat-card">
            <div><i class="layui-icon layui-icon-app" style="color:#FFB800;"></i></div>
            <div class="value">303</div>
          </div>
          <div class="stat-card">
            <div><i class="layui-icon layui-icon-chart" style="color:#FF5722;"></i></div>
            <div class="value">403</div>
          </div>
          <div class="stat-card">
            <div><i class="layui-icon layui-icon-share" style="color:#626E82;"></i></div>
            <div class="value">503</div>
          </div>
          <div class="stat-card">
            <div><i class="layui-icon layui-icon-set" style="color:#F7B500;"></i></div>
            <div class="value">603</div>
          </div>
        </div>

        <!-- 中间图表行 -->
        <div class="charts-row">
          <div class="chart-card">
            <div class="chart-title">用户访问来源</div>
            <div class="chart-container" id="pieChart"></div>
          </div>
          <div class="chart-card">
            <div class="chart-title">体检项统计</div>
            <div class="chart-container" id="barChart"></div>
          </div>
          <div class="chart-card">
            <div class="chart-title">体检维度统计</div>
            <div class="chart-container" id="radarChart"></div>
          </div>
        </div>

        <!-- 底部面积图 -->
        <div class="area-chart-card">
          <div class="chart-title">各店全年销售额</div>
          <div class="chart-container" id="areaChart"></div>
        </div>
      </div>

      <!-- 默认提示文本（点击首页前显示） -->
      <div id="tips">
        请点击左侧菜单的「首页」查看数据看板
      </div>
    </div>

    <!-- 顶部导航栏（可放用户信息、退出等） -->
    <div class="layui-header">
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
          <a href="javascript:;">系统管理员：admin</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">退出</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 引入 Layui JS（CDN 方式，联网即可用） -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // Layui 模块加载：element（导航、布局）
    layui.use(['element'], function(){
      var element = layui.element; 
      var $ = layui.$; // Layui 封装的 jQuery

      // 导航点击事件
      $('.layui-nav-tree .layui-nav-item').on('click', function(){
        var navId = this.id; // 获取点击的导航 ID

        if(navId === 'homeNav'){ // 点击“首页”
          $('#dashboard-container').show(); // 显示看板
          $('#tips').hide(); // 隐藏提示
          initCharts(); // 初始化图表（确保点击后渲染）
        } else { // 点击其他菜单
          $('#dashboard-container').hide(); // 隐藏看板
          $('#tips').show(); // 显示提示
        }
      });

      // 图表初始化函数（封装复用）
      function initCharts(){
        // 1. 饼图：用户访问来源
        var pieChart = echarts.init(document.getElementById('pieChart'));
        pieChart.setOption({
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'], // 环形饼图
              data: [
                { value: 100, name: '视频广告' },
                { value: 80, name: '搜索引擎' },
                { value: 120, name: '直接访问' },
                { value: 50, name: '联盟推广' },
                { value: 70, name: '口碑推荐' }
              ],
              label: { show: true, position: 'outside' } // 标签显示在外侧
            }
          ]
        });

        // 2. 柱状图：体检项统计
        var barChart = echarts.init(document.getElementById('barChart'));
        barChart.setOption({
          xAxis: {
            type: 'category',
            data: ['第一季度','第二季度','第三季度','第四季度']
          },
          yAxis: { type: 'value' },
          series: [
            { name: '20-30', type: 'bar', data: [30,40,50,35], color: '#5793f3' },
            { name: '31-40', type: 'bar', data: [25,35,45,30], color: '#48d1cc' },
            { name: '41-50', type: 'bar', data: [40,50,60,45], color: '#ffd700' },
            { name: '51-60', type: 'bar', data: [20,30,40,25], color: '#ff6347' },
            { name: '61-70', type: 'bar', data: [15,25,35,20], color: '#9370db' }
          ]
        });

        // 3. 雷达图：体检维度统计
        var radarChart = echarts.init(document.getElementById('radarChart'));
        radarChart.setOption({
          radar: {
            indicator: [
              { name: '维度1', max: 100 },
              { name: '维度2', max: 100 },
              { name: '维度3', max: 100 },
              { name: '维度4', max: 100 },
              { name: '维度5', max: 100 }
            ]
          },
          series: [
            {
              type: 'radar',
              data: [{ value: [80,60,70,90,50], name: '体检数据' }]
            }
          ]
        });

        // 4. 面积图：各店全年销售额
        var areaChart = echarts.init(document.getElementById('areaChart'));
        areaChart.setOption({
          xAxis: { type: 'category', data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'] },
          yAxis: { type: 'value' },
          series: [
            { name: '店铺1', type: 'line', stack: '销售额', areaStyle: {}, data: [120,132,101,134,90,230,210,234,190,230,220,230], color: '#ff7f50' },
            { name: '店铺2', type: 'line', stack: '销售额', areaStyle: {}, data: [220,182,191,234,290,330,310,324,390,330,310,320], color: '#87cefa' },
            { name: '店铺3', type: 'line', stack: '销售额', areaStyle: {}, data: [150,232,201,154,190,330,410,424,290,330,320,330], color: '#ffd700' },
            { name: '店铺4', type: 'line', stack: '销售额', areaStyle: {}, data: [320,332,301,334,390,330,320,324,390,330,310,320], color: '#ba55d3' },
            { name: '店铺5', type: 'line', stack: '销售额', areaStyle: {}, data: [820,932,901,934,1290,1330,1320,1324,1390,1330,1320,1330], color: '#48d1cc' }
          ]
        });

        // 监听窗口变化，确保图表自适应
        window.addEventListener('resize', function(){
          pieChart.resize();
          barChart.resize();
          radarChart.resize();
          areaChart.resize();
        });
      }
    });
  </script>
</body>
</html>
